const canvas = document.getElementById('canvas');
/* 获得 2d 上下文对象 */
const ctx = canvas.getContext('2d');
canvas.height = ctx.height = document.body.offsetHeight;
canvas.width = ctx.width =  document.body.offsetWidth;
function lineRun() {
  let radialGradient;
  let distance = 50;
  const speed = 5;
  const draw = (axisX) => {
      /* 清空画布(或部分清空) */
      ctx.clearRect(0, 0, 1600, 1600);
      ctx.beginPath();
      radialGradient = ctx.createRadialGradient(distance, 300, 10, distance, 300, 50); // 创建渐变
      radialGradient.addColorStop(0, "#FFFFFF");
      radialGradient.addColorStop(1, "#EA7F26");
      ctx.fillStyle = radialGradient;
      ctx.moveTo(distance, 300);
      ctx.arc(distance, 300, 50, 0, 2 * Math.PI, false);
      ctx.fill();
      ctx.closePath();
      
      distance = distance + speed;
      
      if (distance > 650) distance = -50;
      requestAnimationFrame(draw);
  }
  ctx.clearRect(0, 0, 1600, 1600);
  ctx.beginPath();
  // ctx.fillStyle = 'red';
  ctx.moveTo(distance, 300);
  ctx.arc(distance, 300, 50, 0, 2 * Math.PI, false);
  // ctx.arc(distance, 300, 50, 0, 0.5 * Math.PI, false);
  ctx.closePath();
  ctx.fill();
  requestAnimationFrame(draw);

  distance = distance + speed;
}

function arcRun() {
  const noChange = () => {
    ctx.beginPath();
    ctx.fillStyle = 'red';
    ctx.arc(500, 400, 30, 2 * Math.PI, false);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(500, 400, 150, 2 * Math.PI, false);
    ctx.closePath();
    ctx.stroke();
  }

  var time=0;
  const change = () => {
    ctx.clearRect(0, 0, 1600, 1600);
    noChange();
    ctx.save(); //将当前以左上角坐标为(0,0)的上下文环境进行保存，这样是为了在接下来中要进行画布偏移后，可以进行还原当前的环境
    ctx.translate(500, 400);
    ctx.rotate(time * 8 * Math.PI / 100); // 每次旋转的角度
    ctx.fillStyle='blue';
    ctx.beginPath();
    ctx.arc(0, 150, 30, 2*Math.PI, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();//将当前为(500,400)的点还原为（0,0）,其实在save中就是将上下文环境保存到栈中，在restore下面对其进行还原
    time += 1;

    requestAnimationFrame(change);
  }

  noChange();
  requestAnimationFrame(change);
}

arcRun();